<template>
	<view>
		<!-- 新增录入框 -->
		<uni-popup ref="inputDialog" :mask-click="false">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<scroll-view class="scroll-Y" scroll-y="true">
					<uni-forms ref="baseForm" :modelValue="form">
						<uni-forms-item label="领料时间" required :labelWidth='80' class="uni-forms-item-bottom">
							<uni-datetime-picker type="datetime" v-model="form.pickTime" :clear-icon="false"
								:disabled="true" />
						</uni-forms-item>
						<uni-forms-item label="领料人" required :labelWidth='80' class="uni-forms-item-bottom">
							<uni-easyinput v-model="form.pickUserName" :disabled="true" />
						</uni-forms-item>
						<uni-row>
							<uni-col :span="22">
								<uni-forms-item label="领料仓库" required :labelWidth='80' class="uni-forms-item-bottom">
									<uni-data-select v-model="form.warehouseId" :localdata="warehouseList"
										style="background-color: #fff;" @change="selectWarehouse">
									</uni-data-select>
								</uni-forms-item>
							</uni-col>
							<!-- <uni-col :span="2">
								<uni-icons type="scan" size="30" @click="setScanShow"></uni-icons>
							</uni-col> -->
						</uni-row>
						<uni-forms-item v-show="scanShow" label="扫码SN码" :labelWidth='80' style="margin-bottom: 10rpx; ">
							<uni-easyinput v-model="form.snArray" type="textarea"
								placeholder="请直接使用PDA扫描物料上的SN码"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="备注" :labelWidth='80' class="uni-forms-item-bottom">
							<uni-easyinput v-model="form.remark" />
						</uni-forms-item>

						<uni-row>
							<uni-col :span="8">
								<button size="mini" @click="addEntry()" style="background-color: #F5B800;"
									v-show="isShowFlag">添加物料</button>
							</uni-col>
						</uni-row>
						<view v-for="(item,index) in form.proPickEntryList">
							<uni-row>
								<uni-col :span="isShowFlag==true?22:24">
									<uni-card style="margin-left: 5rpx;margin-top: 3rpx;">
										<uni-row style="margin-bottom: 10rpx;">
											<uni-col :span="22">
												<uni-easyinput prefixIcon="search" v-model="item.materialNameQ"
													placeholder="输入至少3位物料名" style="background-color: #fff;"
													@input="queryMaterial($event,index)"
													@clear="queryMaterialClear($event,index)">
												</uni-easyinput>
											</uni-col>
											<!-- <uni-col :span="2" style="padding-top: 14rpx;">
												<uni-icons type="scan" size="30"></uni-icons>
											</uni-col> -->
										</uni-row>
										<uni-list>
											<view v-for="(itemM,indexM) in item.materialList">
												<uni-list-item :title="itemM.name" clickable
													@click="selectMaterial(itemM,index)" />
											</view>
										</uni-list>
										<uni-forms-item label="出库产品" required :labelWidth='80'
											class="uni-forms-item-bottom">
											<uni-easyinput v-model="item.materialName" :disabled="true" />
										</uni-forms-item>
										<uni-forms-item label="型号" :labelWidth='80' class="uni-forms-item-bottom">
											<uni-easyinput v-model="item.specification" />
										</uni-forms-item>
										<uni-forms-item label="出库数量" required :labelWidth='80'
											class="uni-forms-item-bottom">
											<uni-easyinput v-model="item.quantity" placeholder="请输入入库数量" />
										</uni-forms-item>
									</uni-card>
								</uni-col>
								<uni-col :span="2" style="padding-top: 100rpx">
									<uni-icons type="close" size="33" @click="deleteEntry(index)"
										v-show="isShowFlag"></uni-icons>
								</uni-col>
							</uni-row>
						</view>
						<view class="button-group">
							<button type="primary" size="mini" @click="cancel()" plain="true">取消</button>
							<button type="primary" size="mini" @click="submit()">提交</button>
						</view>
					</uni-forms>
				</scroll-view>
			</view>
		</uni-popup>
		<pdaScan></pdaScan>
	</view>
</template>

<script>
	import {
		listWarehouse
	} from "@/api/warehouse/warehouse";
	import {
		listMaterial
	} from "@/api/masterdata/material";
	import {
		getUserProfile
	} from "@/api/system/user"
	import {
		listProPick,
		delProPick,
		addProPick,
		updateProPick
	} from "@/api/warehouse/proPick"
	import {
		listUnit
	} from '@/api/masterdata/unit'
	import pdaScan from "@/components/mes/pdaScan.vue"
	import {
		listInventory,
		getInventory,getSpecificationList
	} from "@/api/warehouse/inventory";

	export default {
		name: "proPickForm",
		components: {
			pdaScan
		},
		data() {
			return {
				form: {},
				warehouseList: [],
				queryParams: {
					params: {},
				},
				unitList: [],
				scanShow: false,
				isShowFlag: true,
			}
		},
		created() {
			this.getWarehouse();
			this.reset();
			this.getUnitList();
			var _this = this
			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器  
			uni.$on('scancodedate', function(data) {
				_this.form.snArray += "'" + data.code + "',";
				let arr = _this.form.snArray.split(",")
				if (arr.length % 2 != 0) {
					_this.form.snArray += "\r\n"
				}
				console.log('你想要的code：', _this.form.snArray)
			})
		},
		methods: {
			openPopup() {
				console.log("this.form", this.form)
				this.$refs.inputDialog.open();
			},
			cancel() {
				this.$refs.inputDialog.close();
				this.reset();
			},
			reset() {
				this.form.proPickEntryList = [];
				this.queryParams.materialName = ""
				this.isShowFlag = true
				getUserProfile().then(response => {
					let user = response.data
					this.form = {
						pickTime: new Date().format("yyyy-MM-dd HH:mm:ss"),
						proPickEntryList: [],
						pickUserId: user.userId,
						pickUserName: user.nickName,
						snArray: '',
					}
				})
			},
			addEntry() {
				//需要先选择要领料的仓库
				if (this.form.warehouseId === "") {
					this.$modal.msgError("请先选择领料仓库");
					return;
				}
				let list = this.form.proPickEntryList;
				for (var i = 0; i < list.length; i++) {
					if (typeof(list[i].materialId) == "undefined") {
						return;
					}
				}
				let entry = {
					materialName: "",
					specification: "",
					quantity: ""
				}
				list.push(entry)

			},
			getWarehouse() {
				listWarehouse({
					pageSize: 99999
				}).then(response => {
					let list = [];
					list = response.rows;
					for (let i = 0; i < list.length; i++) {
						list[i].value = list[i].id;
						list[i].text = list[i].name;
						this.warehouseList.push(list[i]);
					}
				});
			},
			deleteEntry(index) {
				this.form.proPickEntryList.splice(index, 1);
			},
			queryMaterial(value, index) {
				if (value.length >= 3) {
					//查询对应物料
					listMaterial({
						name: value,
						status : 0
					}).then(response => {
						this.form.proPickEntryList[index].materialList = response.rows;
						this.$forceUpdate();
					})
				}
			},
			selectMaterial(value, index) {
				let material = this.form.proPickEntryList[index];
				material.materialId = value.id
				material.materialName = value.name
				material.materialNumber = value.number
				material.specification = value.specification
				material.materialUnitId = value.unitId
				material.materialList = []
				material.materialNameQ = ""
				let opt = {};
				opt = this.unitList.find((item) => {
					return item.id === value.unitId;
				});
				material.materialUnitName = opt.name
			},
			submit() {
				//不使用系统自带的校验功能
				let list = this.form.proPickEntryList;
				for (var i = 0; i < list.length; i++) {
					if (list[i].quantity == "" || list[i].quantity <= 0) {
						this.$modal.msgError("请输入数量");
						return;
					}
				}
				if (this.form.warehouseId == "") {
					this.$modal.msgError("请选择仓库");
					return;
				}

				addProPick(this.form).then(response => {
					this.$refs.inputDialog.close();
					this.reset();
				})
			},
			selectWarehouse(id) {
				let opt = {};
				opt = this.warehouseList.find((item) => {
					return item.id === id;
				});
				console.log("this.warehouseList=====>", this.warehouseList)
				this.form.warehouseName = opt.name;
			},
			queryMaterialClear(value, index) {
				this.form.proPickEntryList[index].materialList = []
			},
			/** 获取计量单位数据*/
			getUnitList() {
				let qp = {
					pageSize: 99999
				};
				listUnit(qp).then(response => {
					this.unitList = response.rows;
				});
			},
			setScanShow() {
				if (this.scanShow == true) {
					this.scanShow = false;
				} else {
					this.scanShow = true;
				}

			},
			querySearch(queryString, cb, row) {
				//输入大于等于6位之后的字符后，调用即时库存接口，
				let _this = this;
				if (queryString.length >= 6) {
					getSpecificationList({
						pageSize: 99999,
						materialId: row.pickMaterialId || row.reportMaterialId,
						materialName: row.pickMaterialName || row.reportMaterialName,
						specification: row.pickSpecification || row.reportSpecification
					}).then(response => {
						let list = response.rows
						let res = [];
						for (let i = 0; i < list.length; i++) {
							let obj = {
								"value": list[i]
							}
							res.push(obj)
						}
						_this.restaurants = res;
						console.log("_this.restaurants===>", _this.restaurants)
					});

				}
				//传递物料id+物料名称+和规格型号进行查询,返回完整规格型号+库存数量+仓库
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
		}

	}
</script>
<style>
	.example {
		padding: 16rpx;
		margin: 0rpx;
		background-color: #fff;
		width: 720rpx;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.bg-purple-light {
		border-radius: 4px;
		min-height: 36px;
		background: #FFFFFF;
	}

	.scroll-Y {
		height: 900rpx;
		width: 96%;
	}

	.uni-forms-item-bottom {

		margin-bottom: 8rpx;
	}
</style>